<template>
    <div class="page-wrap">
        <div class="page-cont">
            <flexbox justify="space-between">
                <span class="font-w-b">受理进度</span>
                <div style="margin-right: 16px">
                    <span>所属系统：</span>
                    <a-select placeholder="请选择" style="min-width: 200px" v-model:value="systemId" allowClear>
                        <a-select-option v-for="item of dicOptions.mySystem" :key="item.code">
                            {{ item.system }}
                        </a-select-option>
                    </a-select>
                </div>
            </flexbox>
            <custom-table autoResize rowKey="id" size="small" :loading="loading" :columns="tableColumns" :data-source="list" :pagination="paginationConfig" @change="handleTableChange" class="margin-t-16">
                <template #name="{ record }">
                    <a @click="showDetail(record.id)">{{ record.name }}</a>
                </template>
                <template #countversion="{ record }"> <task-flow :flowInfo="record" style="min-width: 640px" /> </template>
            </custom-table>
        </div>
    </div>
</template>

<script lang="ts">
import { CustomTable } from '@/components';
import TaskFlow from '@/views/workbench/components/ProcessBoard/taskBoard/taskFlow.vue';
import { useRouter } from 'vue-router';
import { useTableLoading, usePagination, useTableColumns, useTableData } from '@/components/Table/hooks';
import { defineComponent, ref, unref, watch } from 'vue';
export default defineComponent({
    components: {
        CustomTable,
        TaskFlow
    },
    setup() {
        const router = useRouter();
        const { loading, setLoading } = useTableLoading();
        const { paginationConfig, setPaginationConfig } = usePagination();
        const { columns: tableColumns } = useTableColumns('taskBoard');
        const { list, getList, handleTableChange, setSearchQuery } = useTableData(setLoading, paginationConfig, setPaginationConfig, 'taskBoard');
        const systemId = ref<string>('');
        const showDetail = (id: number) => {
            router.push({
                path: '/taskRequire/taskDetail',
                query: {
                    id
                }
            });
        };
        watch(systemId, () => {
            setPaginationConfig({
                current: 1
            });
            setSearchQuery({
                systemId: unref(systemId)
            });
            getList();
        });
        getList();
        return {
            systemId,
            loading,
            list,
            handleTableChange,
            tableColumns,
            paginationConfig,
            showDetail
        };
    }
});
</script>

<style scoped lang="less">
.page-wrap {
    min-height: calc(100% - 48px);
    padding: 24px;
    margin: 24px;
    background: #fff;
    .page-cont {
        margin: 0 auto;
    }
}
</style>